<!-- 首页 -->
<template>
	<view>
		<view class="home-wrap">
			<!-- #ifdef APP-PLUS -->
			<u-no-network @retry="init"></u-no-network>
			<!-- #endif -->
		</view>
		<sh-search></sh-search>
		<sh-grid-swiper :list="childlistitem">
		</sh-grid-swiper>
	
		<view class="hot-goods u-m-b-10 u-p-x-16">
			<view class="u-waterfall" style="display: flex;">
				<view id="u-left-column" class="u-column">
					<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center"
						v-for="(leftGoods,index) in leftList" :key="index">
						<ljshop-goods-card-pdd :detail="leftGoods" :type="leftGoods.activity_type"
							:image="leftGoods.thumbnail" :title="leftGoods.name" :subtitle="leftGoods.caption"
							:price="leftGoods.discountPrice.toFixed(2)" :originPrice="leftGoods.group_price"
							:sales="leftGoods.sales_num" :couponprice="leftGoods.coupon_price.toFixed(2)" :market_price="leftGoods.market_price.toFixed(2)"
							:tagTextList="leftGoods.activity_discounts_tags" @click="pddLink(leftGoods.id)">
						</ljshop-goods-card-pdd>
					</view>
				</view>
				<view id="u-right-column" class="u-column" style="margin-left: 20rpx;">
					<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center"
						v-for="(rightGoods,index) in rightList" :key="index">
						<ljshop-goods-card-pdd :detail="rightGoods" :type="rightGoods.activity_type"
							:image="rightGoods.thumbnail" :title="rightGoods.name" :subtitle="rightGoods.caption"
							:price="rightGoods.discountPrice.toFixed(2)" :originPrice="rightGoods.group_price"
							:sales="rightGoods.sales_num" :couponprice="rightGoods.coupon_price.toFixed(2)" :market_price="rightGoods.market_price.toFixed(2)"
							:tagTextList="rightGoods.activity_discounts_tags" @click="pddLink(rightGoods.id)">
						</ljshop-goods-card-pdd>
					</view>
				</view>
			</view>
		</view>

	 
	 
			<!-- 悬浮按钮菜单 -->
			<view class="ljshop-float-btn">
					<view class="btn-img-box u-flex-col" @tap="Orderlist()" >
						<view class="btn-item u-flex-col u-row-center u-col-center">
							<image class="btn-img" src="https://image.hzwltb69.com/app/images/waitcom.png" mode="aspectFill"></image>
							<view class="btn-name">订单</view>
						</view>
					</view>
			</view>
	</view>

</template>

<script>
	import shGridSwiper from './components/sh-grid-swiper.vue';
    import shSearch from './components/sh-search.vue';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shGridSwiper,
			shSearch
		},
		data() {
			return {

				isRefresh: true,
				isConnected: true, //是否有网
				oneRowNum: 5,
				isScorll: false,
				categoryId: 0,
				navigations_list: [],
				fixed: false,
				height: 'auto',
				elClass: this.$u.guid(),
				left: 0,
				width: 'auto',
				stickyTop: 0,
				isSticky: false, //是否吸顶
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				tabCur: 0,
				scrollLeft: 0,
				isEmpty: true,
				childcategoryId: 0,
				goodsList: [],
				tabCurrent: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 0,
				lastPage: 0,
				childlist: [],
				childlistitem: [],
				rebate: 0,
				guidePluginId: ""

			};
		},
		computed: {
			...mapGetters(['isLogin']),
			// 头部模块数据

		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			this.init();
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			const type = this.$Route.query.id;
			this.categoryId = type;

		},
		methods: {
			init() {
				let that = this
				that.$http('goods.pddcate', {
					guidePluginId: 'pddGuidePlugin'
				}).then(res => {
					
					that.childlistitem = res.navigations
					that.guidePluginId = res.guidePluginId;
					uni.setStorageSync("guidePluginId", res.guidePluginId);
					//that.initChild();
					 
					that.getGoodsList()
				});
			},
			async splitData() {

				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;

					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;

					this.rightList.push(item);
				} else {
					this.leftHeight += 330;

					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}

			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},

			// 吸顶相关
			initObserver() {
				if (!this.enable) return;
				// #ifdef APP-PLUS || H5
				this.stickyTop = systemInfo.statusBarHeight + 44;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				let top = systemInfo.statusBarHeight + height;
				this.stickyTop = systemInfo.statusBarHeight + height;
				// #endif
				this.disconnectObserver('contentObserver');

				this.$uGetRect('.' + this.elClass).then(res => {
					this.height = res.height;
					this.left = res.left;
					this.width = res.width;
					this.$nextTick(() => {
						this.observeContent();
					});
				});
			},
			observeContent() {
				this.disconnectObserver('contentObserver');
				const contentObserver = this.createIntersectionObserver({
					thresholds: [0.95, 0.98, 1]
				});
				contentObserver.relativeToViewport({
					top: -this.stickyTop
				});
				contentObserver.observe('.' + this.elClass, res => {
					if (!this.enable) return;
					this.setFixed(res.boundingClientRect.top);
				});
				this.contentObserver = contentObserver;
			},
			setFixed(top) {
				const fixed = top < this.stickyTop;
				if (fixed) {
					this.isSticky = true;
				} else if (this.fixed) {
					this.isSticky = false;
				}
				this.fixed = fixed;
			},
			disconnectObserver(observerName) {
				const observer = this[observerName];
				observer && observer.disconnect();
			},

			// 商品列表
			getGoodsList() {
				let that = this;

				that.$http('goods.indexproducts', {
					guidePluginId: that.guidePluginId,
					page: that.currentPage
				}).then(res => {
				 
					if (res.code == 1) {
						this.isRefresh = false;
						that.goodsList = res.list;
						that.tempList = res.list;
						//that.rebate = res.rebate;
						that.goodsList.length && that.splitData();
					}
				});
			},
			// tabs
			tabChange(index) {
				this.tabCur = index;
				this.scrollLeft = (index - 1) * 60;
				this.childcategoryId = this.navigations_list[index].children[0].id;
				this.childlist = this.navigations_list[index].children;
				this.childlistitem = [];
				this.initChild();
				this.clear();
				this.goodsList = [];
				this.currentPage = 0;
				this.lastPage = 0;
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			},
			tabchildChange(index) {


				this.childcategoryId = this.childlist[index].id;
				this.clear();
				this.styleType === 1 && this.clear();
				this.goodsList = [];
				this.currentPage = 0;
				this.lastPage = 0;
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			},
			initChild() {
				let that = this
				let allList = [];
				for (let i = 0; i < that.childlist.length; i++) {
					if (i % 8 != 7) {
						//console.info(i+"aaaaaa")
						allList.push(that.childlist[i])
						if (i == that.childlist.length - 1) {
							that.childlistitem.push(allList);
						}
					} else {

						allList.push(that.childlist[i])
						that.childlistitem.push(allList);
						allList = [];
					}

				}


			},
			Orderlist(){
		 
				this.$Router.push({
					path: '/pages/pdd/orderList', 
				});
			},
			pddLink(id) {
				// #ifdef APP-PLUS
					
					this.appnav(id);
				// #endif
				// #ifdef MP-WEIXIN
					this.weiXin(id);
				// #endif
			},
			appnav(id){
				let that=this
				 that.$http('order.pddgetUrl', {
				 	UId: uni.getStorageSync("UId"),
				 	guidePluginId:uni.getStorageSync("guidePluginId"),
				 	goodId:id
				 }).then(res => {
					 	
						
					 if(res.code==1){
						let platform=uni.getSystemInfoSync().platform
						
						let URL =res.message;
						
						
						if (platform=="android") {
							
							plus.runtime.openURL("pinduoduo://" + URL.replace("https://", ""), function(res) {
								 
							}, 'com.xunmeng.pinduoduo');
						} else {
							
							
							plus.runtime.launchApplication({
								action: "pinduoduo://com.xunmeng.pinduoduo/" + URL.replace(/https:\/\/.*\//, "")
							}, function(ret) {
								 
							});
						} 
					 }
				 });
			},
			weiXin(id){
				let that=this
				 that.$http('order.pddgetminiUrl', {
				 	UId: uni.getStorageSync("UId"),
					guidePluginId:uni.getStorageSync("guidePluginId"),
					goodId:id
				 }).then(res => {
				let pagePath =res.message.goodsPromotionUrlGenerateResponse.goodsPromotionUrlList[0].weAppInfo.pagePath
				uni.navigateToMiniProgram({
					appId: 'wx32540bd863b27570',
					path: pagePath,
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
					}
				})
				  
				 });
				
			
			}
		}
	};
</script>


<style lang="scss" scoped>
	// 产品分类
	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;

		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}

		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;

				.tab-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					border-radius: 50%;
				}

				.tab-text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;

			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.category-tabs-wrap {
		min-height: 1000rpx;

		// 吸顶
		.u-sticky-wrap {
			background-color: #fff;
		}

		// 瀑布流
		.u-waterfall {
			@include vue-flex;
			flex-direction: row;
			align-items: flex-start;
		}

		.u-column {
			@include vue-flex;
			flex: 1;
			flex-direction: column;
			height: auto;
		}
	}

	// 滑动分类
	.tabs-content {
		white-space: nowrap;

		.tab-item {
			display: inline-block;
			margin: 0 10rpx;
			padding: 0 20rpx;

			.tab-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}

			.title-active {
				color: #a8700d;
			}

			.tab-des {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			.des-active {
				background: linear-gradient(90deg, #e9b461, #eecc89);
				border-radius: 15rpx;
				padding: 2rpx 10rpx;
				color: #ffffff;
			}
		}
	}

.ljshop-float-btn {
	position: fixed;
	bottom: calc(var(--window-bottom) + 100rpx);
	right: 30rpx;
	z-index: 9999;
	background: #333333;
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;

	.btn-item {
		margin-bottom: 20rpx;
		background: "#ff0000";
		.btn-img {
			margin-top: 20rpx;
			width: 80rpx;
			height: 80rpx;
		}
		.btn-name {
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			white-space: nowrap;
		}
	}

}
.img-box {
	position: relative;
	width: 610rpx;
	.modal-img {
		width: 100%;
		will-change: transform;
		height: 830rpx;
	}
}
</style>
